<template>
  <div class="home-container">
    <!-- 轮播图部分 -->
    <div class="carousel-container">
      <div class="carousel-wrapper" @mouseenter="pauseCarousel" @mouseleave="startCarousel">
        <div 
          class="carousel-slide" 
          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        >
          <!-- 用于无缝循环的克隆元素 -->
          <div 
            v-for="(slide, index) in computedSlides" 
            :key="index" 
            class="slide-item"
            :class="{ active: index === currentIndex }"
          >
            <img :src="slide.image" :alt="slide.title" />
            <div class="slide-content" :class="{ animate: shouldAnimate(index) }">
              <h2 class="slide-title">{{ slide.title }}</h2>
              <p class="slide-description">{{ slide.description }}</p>
            </div>
          </div>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <span 
            v-for="(slide, index) in slides" 
            :key="index"
            :class="{ active: displayIndex === index }"
            @click="goToSlide(index)"
          ></span>
        </div>
        
        <!-- 轮播控制按钮 -->
        <button class="carousel-btn prev" @click="prevSlide">‹</button>
        <button class="carousel-btn next" @click="nextSlide">›</button>
      </div>
    </div>

    <!-- 主体部分 -->
    <main class="main-content">
      <section class="intro-section">
        <h2>古树名木保护系统</h2>
        <p>致力于保护和传承珍贵的古树资源，让千年古树焕发新生</p>
      </section>

      <section class="features-section">
        <div class="feature-card" v-for="(feature, index) in features" :key="index">
          <div class="feature-icon">{{ feature.icon }}</div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </section>

      <section class="tree-gallery">
        <h2>古树风采</h2>
        <div class="gallery-grid">
          <div 
            class="tree-item" 
            v-for="(tree, index) in trees" 
            :key="index"
          >
            <img :src="tree.image" :alt="tree.name" />
            <div class="tree-info">
              <h3>{{ tree.name }}</h3>
              <p>{{ tree.age }}年</p>
              <p>{{ tree.location }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>联系我们</h3>
          <p>电话: 400-XXX-XXXX</p>
          <p>邮箱: protect@treasures.com</p>
          <p>地址: XX省XX市XX区XX路XX号</p>
        </div>
        
        <div class="footer-section">
          <h3>快速链接</h3>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">古树名录</a></li>
            <li><a href="#">保护动态</a></li>
            <li><a href="#">科普知识</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-links">
            <a href="#" class="social-icon">微信</a>
            <a href="#" class="social-icon">微博</a>
            <a href="#" class="social-icon">抖音</a>
          </div>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>&copy; {{ currentYear }} 古树名木保护系统. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'

// 轮播图数据
/* const slides = ref([
  {
    image: 'https://images.unsplash.com/photo-1518609878373-06d740f60d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    title: '千年银杏',
    description: '见证历史变迁的活化石'
  },
  {
    image: 'https://images.unsplash.com/photo-1597587155030-70d09b56e449?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    title: '古槐参天',
    description: '承载着无数传说的千年古槐'
  },
  {
    image: 'https://images.unsplash.com/photo-1593488953262-19d813a0d314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    title: '迎客松',
    description: '傲然挺立山崖之上的迎客松'
  }
]) */





 const slides = ref([
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/home/1.jpg',
    title: '锦绣茶尊',
    description: '是世界最古老的人工栽培型古茶树，承载着凤庆深厚茶文化'
  },
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/home/2.jpg',
    title: '千年古玉兰树',
    description: '每年冬至到春节前后繁花盛放，是当地独特自然景观，见证村落变迁'
  },
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/home/3.jpg',
    title: '酸角王',
    description: '气生根造就一树多干奇景，是当地生态与文化融合的代表景观'
  }
])
// 功能特性数据
const features = ref([
  {
    icon: '🌳',
    title: '古树普查',
    description: '全面普查古树名木资源，建立详细档案'
  },
  {
    icon: '🛡️',
    title: '保护监测',
    description: '实时监测古树健康状况，及时预警'
  },
  {
    icon: '📚',
    title: '科普教育',
    description: '传播古树保护知识，提升公众意识'
  },
  {
    icon: '🤝',
    title: '社会参与',
    description: '鼓励公众参与古树保护，共建绿色家园'
  }
])

// 古树展示数据
const trees = ref([
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/tree/d833c895d143ad4b1fca69bb86025aafa50f06e0.webp',
    name: '千年古槐',
    age: 1200,
    location: '山东省菏泽市'
  },
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/home/1.jpg',
    name: '银杏王',
    age: 2500,
    location: '陕西省西安市'
  },
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/tree/R-C.jpg',
    name: '迎客松',
    age: 800,
    location: '安徽省黄山市'
  },
  {
    image: 'https://big-project-tree.oss-cn-beijing.aliyuncs.com/tree/t0161ffa7e78d8c040d.jpg',
    name: '大槐树',
    age: 600,
    location: '山西省洪洞县'
  }
])

// 轮播图相关状态
const currentIndex = ref(1) // 初始索引为1，即第一张真实图片
const carouselInterval = ref(null)
const isTransitioning = ref(false)
const displayedIndex = ref(0) // 用于跟踪当前显示的幻灯片索引

// 计算属性：用于无缝循环的幻灯片数组（在前后各添加一张克隆图片）
const computedSlides = computed(() => {
  if (slides.value.length === 0) return []
  
  // 克隆最后一张图片放到开头，克隆第一张图片放到结尾
  const firstSlide = { ...slides.value[0] }
  const lastSlide = { ...slides.value[slides.value.length - 1] }
  
  return [lastSlide, ...slides.value, firstSlide]
})

// 显示索引（用于指示器显示）
const displayIndex = computed(() => {
  // 处理边界情况
  if (currentIndex.value === 0) {
    // 当在克隆的最后一张图片时，显示真实的最后一张图片索引
    return slides.value.length - 1
  } else if (currentIndex.value === computedSlides.value.length - 1) {
    // 当在克隆的第一张图片时，显示真实的第0张图片索引
    return 0
  } else {
    // 正常情况
    return currentIndex.value - 1
  }
})

// 判断是否应该对指定索引的幻灯片应用动画
const shouldAnimate = (index) => {
  // 只对当前显示的幻灯片应用动画
  return index === currentIndex.value
}

// 轮播图控制函数
const nextSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentIndex.value++
  updateDisplayedIndex()
}

const prevSlide = () => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentIndex.value--
  updateDisplayedIndex()
}

const goToSlide = (index) => {
  if (isTransitioning.value) return
  isTransitioning.value = true
  currentIndex.value = index + 1 // 加1是因为前面有克隆的最后一张图片
  updateDisplayedIndex()
}

// 更新显示索引
const updateDisplayedIndex = () => {
  // 处理边界情况
  if (currentIndex.value === 0) {
    displayedIndex.value = slides.value.length - 1
  } else if (currentIndex.value === computedSlides.value.length - 1) {
    displayedIndex.value = 0
  } else {
    displayedIndex.value = currentIndex.value - 1
  }
}

// 处理过渡结束事件
const handleTransitionEnd = () => {
  isTransitioning.value = false
  
  // 处理无缝循环 - 直接跳转而非过渡
  if (currentIndex.value === 0) {
    // 如果在克隆的最后一张图片，立即跳转到真实的最后一张图片位置（无过渡）
    currentIndex.value = slides.value.length
    // 强制重绘以避免动画效果
    const slideElement = document.querySelector('.carousel-slide')
    if (slideElement) {
      slideElement.style.transition = 'none'
      setTimeout(() => {
        slideElement.style.transition = ''
      }, 20)
    }
  } else if (currentIndex.value === computedSlides.value.length - 1) {
    // 如果在克隆的第一张图片，立即跳转到真实的第一张图片位置
    currentIndex.value = 1
    // 强制重绘以避免动画效果
    const slideElement = document.querySelector('.carousel-slide')
    if (slideElement) {
      slideElement.style.transition = 'none'
      setTimeout(() => {
        slideElement.style.transition = ''
      }, 20)
    }
  }
}

const startCarousel = () => {
  // 先清除已存在的定时器，避免重复
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value)
  }
  
  carouselInterval.value = setInterval(() => {
    nextSlide()
  }, 3000)
}

const pauseCarousel = () => {
  clearInterval(carouselInterval.value)
  carouselInterval.value = null
}

// 当前年份
const currentYear = new Date().getFullYear()

// 监听 currentIndex 变化，处理过渡结束后的跳转
watch(currentIndex, () => {
  setTimeout(handleTransitionEnd, 500) // 与CSS过渡时间保持一致
})

// 组件挂载时启动轮播
onMounted(() => {
  startCarousel()
  
  // 添加过渡结束事件监听器
  const carouselSlide = document.querySelector('.carousel-slide')
  if (carouselSlide) {
    carouselSlide.addEventListener('transitionend', handleTransitionEnd)
  }
})

// 组件卸载时清理定时器
onUnmounted(() => {
  clearInterval(carouselInterval.value)
  
  // 移除事件监听器
  const carouselSlide = document.querySelector('.carousel-slide')
  if (carouselSlide) {
    carouselSlide.removeEventListener('transitionend', handleTransitionEnd)
  }
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 轮播图样式 */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 500px;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide-item {
  min-width: 100%;
  position: relative;
  height: 100%;
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 100%;
  padding: 0 20px;
}

.slide-content .slide-title {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.slide-content .slide-description {
  font-size: 1.2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  max-width: 800px;
  margin: 0 auto;
}

/* 默认状态下隐藏文字 */
.slide-content:not(.animate) .slide-title,
.slide-content:not(.animate) .slide-description {
  opacity: 0;
  transform: translateY(30px);
}

/* 动画状态下的文字 */
.slide-content.animate {
  animation: fadeIn 0.1s ease-out forwards;
}

.slide-content.animate .slide-title {
  animation: textSlideIn 0.8s ease-out 0.3s forwards;
}

.slide-content.animate .slide-description {
  animation: textSlideIn 0.8s ease-out 0.6s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes textSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-indicators span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-indicators span.active {
  background: white;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
  left: 20px;
}

.carousel-btn.next {
  right: 20px;
}

/* 主体内容样式 */
.main-content {
  flex: 1;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.intro-section {
  text-align: center;
  margin-bottom: 50px;
}

.intro-section h2 {
  font-size: 2.5rem;
  color: #2e7d32;
  margin-bottom: 20px;
}

.intro-section p {
  font-size: 1.2rem;
  color: #666;
  max-width: 800px;
  margin: 0 auto;
}

/* 功能特性样式 */
.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.feature-card {
  text-align: center;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #2e7d32;
}

/* 古树画廊样式 */
.tree-gallery h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #2e7d32;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.tree-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.tree-item:hover {
  transform: translateY(-5px);
}

.tree-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.tree-info {
  padding: 20px;
  background: white;
}

.tree-info h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #333;
}

.tree-info p {
  color: #666;
  margin-bottom: 5px;
}

/* 页脚样式 */
.footer {
  background: #2e7d32;
  color: white;
  padding: 40px 20px 0;
  margin-top: 50px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.footer-section h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: #fff;
}

.footer-section p {
  margin-bottom: 10px;
  opacity: 0.9;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a {
  color: white;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.footer-section ul li a:hover {
  opacity: 1;
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-icon {
  display: inline-block;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  transition: background 0.3s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-container {
    height: 300px;
  }
  
  .slide-content .slide-title {
    font-size: 1.8rem;
  }
  
  .slide-content .slide-description {
    font-size: 1rem;
  }
  
  .main-content {
    padding: 20px 15px;
  }
  
  .intro-section h2 {
    font-size: 2rem;
  }
  
  .features-section {
    grid-template-columns: 1fr;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}
</style>